<template>
  <div class="ys-absolute-container" id="map"></div>
</template>
<script lang="ts">
import { ref, onMounted, getCurrentInstance } from "vue";
import $ from "jquery";
import chinaGeoCoordMap from "../constants/chinaGeoCoordMap";
import { toNumber } from "@vue/shared";
interface I_arrDatasItem {
  name: string;
  value: number;
}
type T_arrDatas = I_arrDatasItem[][];

export default {
  setup() {
    const { proxy, ctx } = getCurrentInstance(); //获取当前实例  ctx有问题待验证 推荐使用proxy
    var series: any = ref([]);
    //航线的颜色
    const color: string[] = ["#a6c84c", "#ffa022", "#46bee9"];

    // 飞机canvas
    var planePath =
      "path://M1705.06,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705.06,1318.313z";

    //向内流出 value:是显示的数据
    const arrDatas: Readonly<T_arrDatas> = [
      [{ name: "黑龙江", value: 5 }],
      [{ name: "内蒙古", value: 1.2 }],
      [{ name: "吉林", value: 1.3 }],
      [{ name: "上海", value: 5 }],
      [{ name: "山西", value: 1.4 }],
      [{ name: "四川", value: 1.4 }],
      [{ name: "河北", value: 1.4 }],
      [{ name: "云南", value: 1.4 }],
      [{ name: "青海", value: 1.4 }],
      [{ name: "新疆", value: 1.4 }],
      [{ name: "西藏", value: 1.4 }],
      [{ name: "广东", value: 1.04 }],
    ];

    // 目标城市以及 出发地点
    const targetArea: string = "上海";

    const linesList: any = [targetArea, arrDatas];

    // 目标地点的经纬度
    const toCoord: number[] = chinaGeoCoordMap[targetArea];

    //向内流出
    const convertData = function (data: T_arrDatas) {
      var res: { fromName: string; toName: string; coords: number[][] }[] = [];
      for (let i = 0; i < data.length; i++) {
        var dataItem: I_arrDatasItem[] = data[i];

        //匹配出发城市 获取经纬度
        var fromCoord: number[] = chinaGeoCoordMap[dataItem[0].name];

        // 出发地点和到达地点都有话 添加航线图
        if (fromCoord && toCoord) {
          res.push({
            fromName: dataItem[0].name,
            toName: dataItem[0].name,
            // coords: [toCoord,fromCoord] //向外
            coords: [fromCoord, toCoord], //向内
          });
        }
      }
      return res;
    };

    // 根据位置画路线 设置series
    const setSeriesConfigHandle = () => {
      
      [linesList].forEach(function (item: [string, T_arrDatas], i: number) {
        const itemArriveDatas: T_arrDatas = item[1];

        series.value.push(
          {
            type: "lines", //用于带有起点和终点信息的线数据的绘制，主要用于地图上的航线，路线的可视化。
            name: item[0] + " Top3", //目的城市 上海
            zlevel: 1, //层级 大的会放在小的canvas上
            effect: {
              show: true, //显示特性
              period: 6, //动效时间 单位s
              trailLength: 0.1, //尾轨迹长度 0-1
              color: "red", //arrow箭头的颜色
              symbolSize: 3, //设置大小
            },
            lineStyle: {
              //也可以写成nomal: {...} 但是没必要 可以直接配置属性
              color: color[i],
              width: 0, //将轨迹隐藏
              curveness: 0.2, //设置轨迹的曲度
            },
            data: convertData(itemArriveDatas), //需要效果的路线
          },
          {
            name: item[0] + " Top3",
            type: "lines",
            zlevel: 2,
            symbol: ["none", "arrow"], //线两端的标记类型 [出发点, 到达点]
            symbolSize: 10,
            effect: {
              show: true,
              period: 6,
              trailLength: 0,
              symbol: planePath, //飞机
              symbolSize: 15, //飞机大小
            },
            lineStyle: {
              color: color[i],
              width: 1,
              opacity: 0.6,
              curveness: 0.2,
            },
            data: convertData(itemArriveDatas),
          },
          {
            type: "effectScatter", //气泡涟漪效果
            coordinateSystem: "geo", //使用地理坐标系 cartesian2d :使用二维的直角坐标系（也称笛卡尔坐标系） polar:极坐标系 geo
            zlevel: 3,
            symbol: "circle",
            symbolSize: function (val: number[]) {
              return 5 + val[2] * 5; //圆环大小 根据数据量的大小动态设置圆环大小 从而凸显数据
            },
            rippleEffect: {
              //涟漪特效
              period: 4, //动画时间，值越小速度越快
              brushType: "stroke", //波纹绘制方式 stroke, fill
              scale: 4, //波纹圆环最大限制，值越大波纹越大
            },
            label: {
              //文本标签
              show: true,
              position: "right", //显示位置
              offset: [5, 0], //偏移设置
              formatter: function (params: any): string {
                //圆环显示文字
                return "直采指标：" + params.data.value[2];
              },
              fontSize: 13,
              emphasis: {
                show: true,
              },
            },

            itemStyle: {
              normal: {
                show: false,
                color: "#a6c84c",
              },
            },
            data: itemArriveDatas.map(function (dataItem: I_arrDatasItem[]) {
              const randomColor = color[parseInt((Math.random() * 3).toString())]; //随机色

              const { name, value }: { name: string; value: number } = dataItem[0];
          
              return {
                name,
                value: chinaGeoCoordMap[name].concat([value]), //整组数据 [经度，维度， 值]
                itemStyle: {
                  normal: {
                    show: false,
                    color: randomColor,
                  },
                },
              };
            }),
          }
        );
      });
    };

    onMounted(() => {
      console.log(proxy, getCurrentInstance()); //proxy数据: getCurrentInstance().appContext.config.globalProperties
      setSeriesConfigHandle();
      // 地图配置
      var option = {
        // 提示框设置
        tooltip: {
          trigger: "item",
          backgroundColor: "rgba(166, 200, 76, 0.82)",
          borderColor: "#FFFFCC",
          showDelay: 0,
          hideDelay: 0,
          enterable: true,
          transitionDuration: 0,
          extraCssText: "z-index:100",
          formatter: function (params:any, ticket: string, callback: Function) {
            const {name, value, seriesIndex} = params
            //根据业务自己拓展要显示的内容
            var areaVal = value[seriesIndex + 0];

            return "<span style='color:#fff;'>" +
              name +
              "</span><br/>数据：" +
              areaVal;
          },
        },
        geo: { //地理坐标系组件 这里是静态资源引入的地图，如果需要动态地图需要引入第三方地图库。因为国家土地是可能会发生更改的
          map: "china",
          zoom: 1.2, //当前视角的缩放比例。
          label: {
            show: true,
            color: "#fff",
            // emphasis: {
            //     show: true
            // }
          },
          roam: true, //TODO:是否允许缩放
          itemStyle: {
            normal: {
              borderWidth: 1,
              // 线性渐变，前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1，相当于在图形包围盒中的百分比，如果 globalCoord 为 `true`，则该四个值是绝对的像素位置
              borderColor: { //省区域边线
                type: "radial",
                x: 0.5,
                y: 0.5,
                r: 0.1,
                colorStops: [
                  {
                    offset: 0,
                    color: "rgba(0,188,255,0.5)", // 100% 处的颜色
                  },
                  {
                    offset: 0.5,
                    color: "rgba(0,67,244,0.1)", // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "rgba(0,188,255,0.5)", // 100% 处的颜色
                  },
                ],
                globalCoord: false, // 缺省为 false
              },
              areaColor: {
                type: "radial",
                x: 0.5,
                y: 0.5,
                r: 0.8,
                colorStops: [ //设置省区域的版块颜色
                  {
                    offset: 0,
                    color: "rgba(0, 0, 0, 0)", // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "rgba(0, 0, 0, 0)", // 100% 处的颜色
                  },
                ],
                globalCoord: false, // 缺省为 false
              },
              shadowColor: "rgba(128, 217, 248, 1)",
              shadowOffsetX: -2,
              shadowOffsetY: 2,
              shadowBlur: 10,
            },
            // 移入高亮
            emphasis: {
              areaColor: "red",
              borderWidth: 0,
            },
          },
        },
        series: series.value,
      };
      // 绘制echarts
      const echarts = proxy.echarts;

      var myChart = echarts.init($("#map")[0]);
      
      myChart.setOption(option);
      
      // 区域点击处理
      myChart.on("click", function (param:any) {
        console.log('click', param)
      });
      $(window).resize(function () {
        myChart.resize();
      });
    });
  },
};
</script>

<style scoped lang="less" >
.ys-absolute-container {
  background-color: #282828;
  overflow: hidden;
  height: 100vh; /**画布必须设置高度 否则会报错 */
  
}
</style>
